const CallbackDemo = () => {
  return (
    <>
      <h3>--组件缓存</h3>
      <ul>
        <li>useCallback 与 useMemo 相似，都是为了缓存</li>
        <li>两者都作用在重新渲染的过程中，而在初次渲染时无用甚至有害</li>
        <li>useCallback 对于缓存函数更有用， useCallback 的返回值是一个缓存的函数， useMemo 则可以是任意值</li>
        <li>React 中，当 state 或者 prop 发生变化时，组件就会重新渲染自己</li>
        <li>而父组件更新必定导致子组件更新，但是子组件状态不变时，则不必要更新的</li>
        <li>因此，需要使用 useMemo 来缓存子组件状态，或者 React.memo 包裹子组件</li>
        <li>但是对于一个 onClick 的 prop ，也需要做缓存才能真正的做到不更新子组件</li>
        <li>所以还需要将 onClick 使用 useCallback 来包裹才行</li>
        <li>
          <strong>总结：</strong>
          只有组件的每一个 prop 、以及组件本身被缓存的时候，才能真正的避免子组件更新
        </li>
      </ul>
    </>
  )
}

export default CallbackDemo
